<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div2" style="width: 300px;height: 300px;border: 1px solid blue;" onclick="divDbClick1()"
		onmouseenter="enterDiv()" onmouseleave="leaveDiv()" onmousemove="moveDiv()"></div>
		<div id="div3" style="width: 300px;height: 300px;border: 1px solid red"></div>
		<button type="button" id="btn2">普通按钮</button>
		<!-- <button type="button" id="btn3" ">打印我在DIV上面移动</button> -->
		<button type="button" id="btn3" onclick="addListener()">监听事件</button>
		<button type="button" id="btn4" onclick="removeListener()">移除监听事件</button>
		<!-- 3.登入页面,用户名输入框,密码输入框,提交按钮 -->
		<form method="post">
			用户名:<input type="text" id="username" value="" onfocus="enter()" onblur="leave()" /><br />
			密码:&nbsp;&nbsp;&nbsp;<input type="password" id="password" value="" onfocus="enterpsd()" onblur="leavepsd()"/><br />
			<button type="submit" onclick="tijiao()">提交按钮</button>
		</form>
	</body>
	<script type="text/javascript">
		// 1.按钮和DIV的单击事件（三种绑定方式）
		function divDbClick1(){
			console.log("按钮被点击了")
		}
		// 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		function enterDiv(){
			console.log("进入了DIV")
		}
		function leaveDiv(){
			console.log("离开DIV")
		}
		function moveDiv(){
			console.log("移动DIV")
		}
		// 3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		function enter(){
			console.log("用户在输入名称")
		}
        // 3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		function leave(){
			let a = document.getElementById("username")
			if(a.value.length == ' ')
			{
				alert("没有输入用户名")
			}
		}
        // 3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		function enterpsd(){
			console.log("用户在输入密码")
		}
        // 3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		function leavepsd(){
			let a=document.getElementById("password")
			if(a.value.length == " "){
				alert("没有输入密码")
			}
		}
        // 3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
        //       密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		function tijiao(){
			let a=document.getElementById("username")
			let b=document.getElementById("password")
			if(a.value.length == " " && b.value.length == " "){
			alert("用户名和密码为空")
			}
			if(a.value.length == " " ){
			alert("用户名为空")
			}
			if(b.value.length == " "){
			alert("密码为空")
			}
		}
		// 4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
		function move(){
			console.log("我在DIV上移动监听")
		}
		function addListener(){
			document.getElementById("div3").addEventListener('mousemove',move)
		}
		function removeListener(){
			document.getElementById("div3").removeEventListener('mousemove',move)
		}
	</script>
</html>
